<template>
  <view class="mine-container">
    <simple-image :src="baseUrl + '/profile/bg/mine-bg.png'" width="100%" height="600rpx"></simple-image>
    <yd-panel top="-360rpx">
      <view class="flex-between">
        <view class="margin-x-20 flex-start">
          <u-avatar :src="avatar" size="60" @click="handleToAvatar"></u-avatar>
          <view class="user-details margin-left-10">
            <view v-if="name" class="user-name">{{ name }}</view>
            <view v-else class="login-prompt" @click="handleToLogin">点击登录</view>
            <text class="user-subtitle">{{ name ? '学习达人' : '开始您的学习之旅' }}</text>
          </view>
        </view>
      </view>
      <view class="color-bg-fff padding-x-10 padding-y-15 border-radius-10 margin-15 shadow">
        <u-grid :border="false" col="4">
          <u-grid-item @click="goPage(listItem.url)" v-for="(listItem, listIndex) in list1" :key="listIndex">
            <simple-image :src="listItem.src" width="82rpx" height="82rpx"></simple-image>
            <text class="color-333 font-12 margin-top-5">{{ listItem.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>
      <view class="margin-x-15 margin-top-30">
        <view class="flex-between" @click="goPage('/pages/mine/setting/index')">
          <view class="flex-start">
            <simple-image src="/static/images/mine/icon-setting.png" width="50rpx" height="50rpx"></simple-image>
            <text class="color-333 font-16 margin-left-5">应用设置</text>
          </view>
          <u-icon name="arrow-right" color="#333" size="16"></u-icon>
        </view>
      </view>
    </yd-panel>
  </view>
</template>

<script>
import config from '@/config'
const baseUrl = config.baseUrl
export default {
  data() {
    return {
      baseUrl: baseUrl,
      name: this.$store.state.user.nickName,
      list1: [
        {
          src: '/static/images/mine/icon1.png',
          title: '发票抬头',
          url: '/pages/mine/invoiceHeader/index'
        }
      ],
    }
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50
    }
  },
  methods: {
    goPage(url) {
      uni.navigateTo({
        url
      })
    },
    handleToInfo() {
      this.$tab.navigateTo('/pages/mine/info/index')
    },
    handleToEditInfo() {
      this.$tab.navigateTo('/pages/mine/info/edit')
    },
    handleToSetting() {
      this.$tab.navigateTo('/pages/mine/setting/index')
    },
    handleToLogin() {
      this.$tab.reLaunch('/pages/login')
    },
    handleToAvatar() {
      this.$tab.navigateTo('/pages/mine/avatar/index')
    },
    handleHelp() {
      this.$tab.navigateTo('/pages/mine/help/index')
    },
    handleAbout() {
      this.$tab.navigateTo('/pages/mine/about/index')
    },
    handleJiaoLiuQun() {
      this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
    },
    handleBuilding() {
      this.$modal.showToast('模块建设中~')
    }
  }
}
</script>

<style scoped>
.mine-container {
  min-height: 100vh;
  background: #fff;
}

.header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 40rpx 30rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-profile {
  display: flex;
  align-items: center;
}

.avatar-section {
  margin-right: 20rpx;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.default-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-icon {
  font-size: 40rpx;
  color: rgba(255, 255, 255, 0.8);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.login-prompt {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.user-subtitle {
  font-size: 24rpx;
  color: #999;
}

.header-action {
  display: flex;
  align-items: center;
}

.action-text {
  font-size: 26rpx;
  color: #333;
  margin-right: 8rpx;
}

.action-arrow {
  font-size: 32rpx;
  color: #999;
}

.main-content {
  background: #f8f9fa;
  border-radius: 30rpx 30rpx 0 0;
  margin-top: 20rpx;
  padding: 30rpx;
  min-height: calc(100vh - 200rpx);
}

.stats-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stats-header {
  margin-bottom: 20rpx;
}

.stats-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 28rpx;
  color: #667eea;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 22rpx;
  color: #666;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.action-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.action-item:active {
  transform: scale(0.95);
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12rpx;
}

.qq-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.service-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.feedback-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.like-icon {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.icon-text {
  font-size: 28rpx;
}

.action-title {
  font-size: 22rpx;
  color: #333;
  text-align: center;
}

.menu-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f8f9fa;
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.edit-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.help-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.about-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.setting-icon {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.menu-title {
  font-size: 28rpx;
  color: #333;
}

.menu-arrow {
  font-size: 32rpx;
  color: #ccc;
}
</style>
